<template>
	<view class="tn-safe-area-inset-bottom tn-margin-bottom-sm">
	  <tn-swipe-action>
	    <tn-swipe-action-item v-for="(item,index) in listall" :key="index" :name="index" :options="options">
	      <view @click="gotos(item.id)" class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin"
		   style="padding: 10px;box-shadow: 5px 5px 5px 5px rgba(225, 225, 225, 0.5);width: 96%;margin: 0 auto;border-radius: 10px;margin-top: 8px;background-color: #fff;">
	        <view class="justify-content-item">
	          <view class="tn-flex tn-flex-col-center tn-flex-row-left">
	            <view class="tn-padding-right tn-color-black">
	              <view class="tn-padding-right tn-padding-left-sm tn-text-lg tn-text-bold" style="font-size: 17px;height: 40px;line-height: 20px;overflow: hidden;">
	                <text class="tsf">招标</text>{{item.title}}
	              </view>
	              <view style="height: 30px;line-height: 30px;margin-top: 5px;font-size: 14px;" class="tn-padding-right tn-padding-top-xs tn-text-ellipsis tn-text-lg tn-padding-left-sm" >
	                <text class="tn-color-grey">发布时间:{{item.statime}}</text><text style="margin-left: 20px;" class="tn-color-grey">截至时间:{{item.endtime}}</text>
	              </view>
				  <view style="height: 30px;margin-top: 15px;overflow: hidden;" class="tn-padding-right  tn-text-ellipsis tn-text-lg tn-padding-left-sm" >
						<view style="float: left;width: 60%;">
							<text class="asv">{{item.address}}</text>
							<text style="margin-left: 3px;" class="asv">{{item.cname}}</text>
						</view>
					    <view style="float: left;width: 40%;text-align: right;height: 30px;line-height: 30px;">
							<text class="tn-icon-eye" style="font-size: 16px;margin-right: 3px;"></text>
							<text>{{item.lnum}}</text>
						</view>
				  </view>
	            </view>
	          </view>
	        </view>
	       <!-- <view class="justify-content-item">
	          <view class="tn-flex tn-flex-row-right">
	            <view class="">2022-05-21</view>
	          </view>
	          <view class="tn-flex tn-flex-row-right">
	            <tn-badge backgroundColor="tn-cool-bg-color-1" fontColor="tn-color-white" :radius="40" margin="10rpx 0rpx 10rpx 10rpx"><text>6</text></tn-badge>
	          </view>
	        </view> -->
	      </view>
	    </tn-swipe-action-item>
	  </tn-swipe-action>
	</view>
</template>

<script>
	export default {
		name:"mlist",
		props:{
			listall:{
				type: Array
			},
		
		},
		data() {
			return {
				options: [{
				    icon: 'star',
				    style: {
				      backgroundColor: '#FFA726',
				      width: '80rpx',
				      height: '80rpx',
				      margin: '0 12rpx',
				      borderRadius: '100rpx'
				    }
				  },
				  {
				    icon: 'delete',
				    style: {
				      backgroundColor: '#E83A30',
				      width: '80rpx',
				      height: '80rpx',
				      margin: '0 12rpx',
				      borderRadius: '100rpx'
				    }
				  }
				]
			};
		},	
		methods:{
			gotos(e){
				uni.navigateTo({
					url: '/pages/job/zbdetail?id=' + e
				})
			}
		}
	}
</script>


<style lang="scss" scoped>
	.template-message{
	}
  
  .tn-message-fixed{
    position: fixed;
    background-color: rgba(255,255,255,1);
    box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
    top: 0;
    width: 100%;
    transition: all 0.25s ease-out;
    z-index: 100;
  }
  .asv{
	  color: #3B83FC;
	  border:1px solid #3B83FC;
	  border-radius: 5px;
	  margin-right: 10px;
	  height: 30px;
	  line-height: 30px;
	  font-size: 12px;
	  padding: 5px;
  }
  .tsf{
	  color: #3B83FC;
	  // background-color: #3B83FC;
	  // border-radius: 5px;
	  margin-right: 10rpx;
	  height: 20px;
	  line-height: 20px;
	  font-size: 17px;
	  // padding: 5px;
  }
  /* 图标容器1 start */
  .icon1 {
    &__item {
      width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 30rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;
      
      &--icon {
        width: 90rpx;
        height: 90rpx;
        font-size: 60rpx;
        border-radius: 50%;
        margin-bottom: 18rpx;
        position: relative;
        z-index: 1;
        
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg5.png);
        }
      }
    }
  }
  
  /* 用户头像 start */
  .logo-image {
    width: 90rpx;
    height: 90rpx;
    position: relative;
  }
  
  .logo-pic {
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: top;
    // box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    overflow: hidden;
    // background-color: #FFFFFF;
  }
</style>